<template>
  <div  class="white-box" v-loading.fullscreen="loading">
    <title-more :title="`队伍号：${detail.id}`"></title-more>
    <div style="margin-bottom: 20px">
      <div style="margin-left: 10px;flex: 1;font-size: 16px">
        <div style="margin-bottom: 16px"><el-text type="info">创建时间：</el-text>{{detail.created}}</div>
        <div style="display: flex;align-items: center">
          <el-text type="info">状态：</el-text>
          <el-tag v-if="detail.itemStatus === 0" type="success">进行中</el-tag>
          <el-tag v-else-if="detail.itemStatus === 1" type="primary">已完成</el-tag>
          <el-tag v-else-if="detail.itemStatus === 2" type="warning">等待中</el-tag>
        </div>
      </div>
    </div>
    <div style="width:600px">
      <template  v-for="floor in [floor_one,floor_two,floor_three]">
        <div  style="align-items: flex-start;display: flex">
          <div v-for="v in floor" style="flex: 1;text-align: center;margin-bottom: 16px">
            <template v-if="v.phone">
              <div style="margin-bottom: 6px">
                <el-avatar :size="60" :src="proxy.imgUrl + v.avatar">
                  <img :src="defaultAvatar"/>
                </el-avatar>
              </div>
              <div  style="margin-bottom: 6px">
                {{v.nickName == v.phone ? hidePhone(v.nickName) : v.nickName}}
              </div>
              <div  style="margin-bottom: 6px">
                {{v.phone}}
              </div>
              <div class="">
                <el-text type="info">{{v.created}}</el-text>
              </div>
            </template>
            <template v-else>
              <div class="">
                <el-avatar :size="60"> 空 </el-avatar>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, watch, computed} from "vue"
import {useRoute, useRouter} from "vue-router"
import TitleMore from "@components/title-more.vue";

const router = useRouter()
const route = useRoute()
const sid = route.query.sid || ""
const { proxy } = getCurrentInstance()
const { hidePhone } = proxy.$util;

const loading = ref(false)
const detail = reactive({
  memberList:[]
})
const getDetail = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/item/user-info/${sid}`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          if(result){
            for (let key in result){
              detail[key] = result[key]
            }
            for (let key in formData){
              formData[key] = result[key]
            }
          }
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}
const floor_one = computed(() => {
  let item = detail.memberList.find(v => v.memberLevel === 1);
  return [item || {}]
})
const floor_two = computed(() => {
  let item2 = detail.memberList.find(v => v.memberLevel === 2);
  let item3 = detail.memberList.find(v => v.memberLevel == 3);
  return [item2 || {}, item3 || {}]
})
const floor_three = computed(() => {
  let item4 = detail.memberList.find(v => v.memberLevel === 4);
  let item5 = detail.memberList.find(v => v.memberLevel === 5);
  let item6 = detail.memberList.find(v => v.memberLevel === 6);
  let item7 = detail.memberList.find(v => v.memberLevel === 7);
  return [
    item4 || {},
    item5 || {},
    item6 || {},
    item7 || {},
  ]
})
onMounted(() => {
  getDetail()
})


</script>


<style lang="less" scoped>

</style>
